<template>
	<view class="bottom">
		<view class="flex_c">
			<image src="/static/logo.png" mode="" @click="share"></image>
			分享
		</view>
		<view class="flex_c">
			<image src="/static/logo.png" mode=""></image>
			收藏
		</view>
		<view class="flex_c">
			<image src="/static/logo.png" mode=""></image>
			点赞
		</view>
		<view>
			<view class="to_buy">我也想去拍</view>
		</view>
		<view class="customer" @click="mePopu">
			<image src="/static/logo.png" mode=""></image>
		</view>
	</view>
	<uv-popup ref="popup" mode="bottom" round="10">
	<view class="share_box">
		<view class="share_list">
			<view class="share_item">
				<image src="/static/logo.png" mode=""></image>
				<text>分享给好友</text>
			</view>
			<view class="share_item">
				<image src="/static/logo.png" mode=""></image>
				<text>生成分享海报</text>
			</view>
		</view>
		<view class="cancel" @click="cancel">
			取消
		</view>
	</view>
	</uv-popup>
	<uv-popup ref="me" mode="bottom" round="10">
	<view class="me_box">
		<view class="user_info">
			<image src="/static/logo.png" mode=""></image>
			<text>name</text>
			<text style="font-size: 24rpx;">ID:1014</text>
		</view>
		<view class="me_list">	
			<view class="me_item">
				<image src="/static/logo.png" mode=""></image>
				<text>致电</text>
			</view>
			<view class="me_item">
				<image src="/static/logo.png" mode=""></image>
				<text>微信</text>
			</view>
			<view class="me_item">
				<image src="/static/logo.png" mode=""></image>
				<text>位置</text>
			</view>
		</view>
		<view class="cancel" style="color: #c0c4cc;" @click="cancelMe">
			取消
		</view>
	</view>
	</uv-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const popup = ref()
	const me=ref()
	const mePopu = () => {
		me.value.open()
	}
	const cancelMe=()=>{
		me.value.close()
	}
	const share = () => {
		popup.value.open()
	}
	const cancel=()=>{
		popup.value.close()
	}

</script>

<style lang="scss" scoped>
	.user_info{
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 999%;
			margin-bottom: 20rpx;
		}
	}
	.me_box{
		height: 650rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.me_list{
			box-sizing: border-box;
			padding: 80rpx 100rpx;
			display: flex;
			justify-content: space-between;
			.me_item{
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 50rpx;
				}
			}
		}
	}
	.cancel{
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		color: #008bca;
		border-top: 1px solid #eeeeee;
	}
	.share_box{
		height: 400rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.share_list{
			box-sizing: border-box;
			padding: 80rpx 100rpx;
			display: flex;
			justify-content: space-between;
			.share_item{
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
					width: 50rpx;
					height: 50rpx;
					margin-bottom: 50rpx;
				}
			}
		}
	}
	.customer {
		image {
			width: 60rpx;
			height: 60rpx;
		}
	}

	.to_buy {
		background: rgb(255, 145, 118);
		background: linear-gradient(90deg, rgba(255, 145, 118, 1) 0%, rgba(255, 124, 119, 1) 35%);
		color: white;
		border-radius: 50rpx;
		height: 80rpx;
		padding: 0 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		width: 100vw;
		font-size: 28rpx;
		align-items: center;

	}

	.flex_c {
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}
</style>